<template>
  <div class="chart-container">
    <!-- 标题区域 -->
    <el-card class="filter-card">
      <el-row :gutter="20" type="flex" justify="space-between" align="middle">
        <el-col :span="12">
          <h2 class="page-title">汽车库存统计报表</h2>
        </el-col>
<!--        <el-col :span="12" class="text-right">-->
<!--          <el-button -->
<!--            type="success" -->
<!--            icon="el-icon-download" -->
<!--            @click="handleExport"-->
<!--            :loading="exporting"-->
<!--          >-->
<!--            {{ exporting ? '导出中...' : '导出报表' }}-->
<!--          </el-button>-->
<!--        </el-col>-->
      </el-row>
    </el-card>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">总库存数量</div>
            <div class="data-value">{{ totalStock }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">库存预警数</div>
            <div class="data-value warning">{{ warningCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">车型总数</div>
            <div class="data-value">{{ modelCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 库存分布图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">
            <span>车型库存分布</span>
          </div>
          <div ref="stockChart" class="chart"></div>
        </el-card>
      </el-col>
      <!-- 预警状态图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header">
            <span>库存预警状态</span>
          </div>
          <div ref="warningChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStockData } from '@/api/chat/chat'

export default {
  name: "chartStock",
  data() {
    return {
      stockChart: null, // 库存分布图实例
      warningChart: null, // 预警状态图实例
      stockData: [], // 库存数据
      exporting: false, // 导出状态
    }
  },
  computed: {
    // 计算总库存数量
    totalStock() {
      return this.stockData.reduce((sum, item) => sum + item.stock_quantity, 0)
    },
    // 计算预警数量
    warningCount() {
      return this.stockData.filter(item => item.stock_quantity <= item.warning_threshold).length
    },
    // 计算车型数量
    modelCount() {
      return this.stockData.length
    }
  },
  mounted() {
    this.initCharts()
    this.fetchData()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.stockChart && this.stockChart.dispose()
    this.warningChart && this.warningChart.dispose()
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.stockChart = echarts.init(this.$refs.stockChart)
      this.warningChart = echarts.init(this.$refs.warningChart)
    },

    // 处理窗口大小变化
    handleResize() {
      this.stockChart && this.stockChart.resize()
      this.warningChart && this.warningChart.resize()
    },

    // 获取数据
    async fetchData() {
      try {
        const res = await getStockData()
        this.stockData = res.data
        this.updateCharts()
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 更新图表
    updateCharts() {
      // 更新库存分布图
      this.stockChart.setOption({
        title: {
          text: '各车型库存情况'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: this.stockData.map(item => item.model),
          axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
          type: 'value',
          name: '库存数量'
        },
        series: [{
          type: 'bar',
          data: this.stockData.map(item => ({
            value: item.stock_quantity,
            itemStyle: {
              color: item.stock_quantity <= item.warning_threshold ? '#F56C6C' : '#67C23A'
            }
          }))
        }]
      })

      // 更新预警状态图
      this.warningChart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'outside'
          },
          data: [
            {
              name: '正常库存',
              value: this.stockData.filter(item => item.stock_quantity > item.warning_threshold).length,
              itemStyle: { color: '#67C23A' }
            },
            {
              name: '库存预警',
              value: this.warningCount,
              itemStyle: { color: '#F56C6C' }
            }
          ]
        }]
      })
    },

    // 导出报表
    async handleExport() {
      if (this.exporting) return
      this.exporting = true
      try {
        // 这里添加导出逻辑
        this.$message.success('导出成功')
      } catch (error) {
        this.$message.error('导出失败')
      } finally {
        this.exporting = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  padding: 20px;

  .filter-card {
    .page-title {
      margin: 0;
      color: #303133;
      font-size: 20px;
    }

    .text-right {
      text-align: right;
    }
  }

  .data-overview {
    margin: 20px 0;
    
    .data-item {
      text-align: center;
      
      .data-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
      }
      
      .data-value {
        font-size: 24px;
        font-weight: bold;
        color: #409EFF;
        
        &.warning {
          color: #F56C6C;
        }
      }
    }
  }

  .chart-card {
    .chart {
      height: 400px;
      width: 100%;
    }
  }

  .el-card {
    margin-bottom: 20px;
  }
}
</style>